<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>课程视频播放器</title>
    <link rel="stylesheet" href="styles.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
</head>
<body>
    <div class="video-player-container">
        <div class="video-container">
            <video id="videoPlayer" class="video-js">
                <source src="" type="video/mp4">
                您的浏览器不支持HTML5视频
            </video>
        </div>
        
        <div class="controls">
            <div class="progress-container">
                <progress id="progressBar" value="0" max="100"></progress>
                <input type="range" id="seekBar" value="0" max="100">
            </div>
            
            <div class="main-controls">
                <button id="playPauseBtn" class="control-btn">
                    <i class="fas fa-play"></i>
                </button>
                
                <div class="time-display">
                    <span id="currentTime">00:00</span> / <span id="duration">00:00</span>
                </div>
                
                <div class="volume-control">
                    <button id="muteBtn" class="control-btn">
                        <i class="fas fa-volume-up"></i>
                    </button>
                    <input type="range" id="volumeBar" min="0" max="1" step="0.1" value="1">
                </div>
                
                <button id="fullscreenBtn" class="control-btn">
                    <i class="fas fa-expand"></i>
                </button>
                
                <div class="playback-rate">
                    <select id="speedSelect" class="speed-select">
                        <option value="0.5">0.5x</option>
                        <option value="0.75">0.75x</option>
                        <option value="1" selected>1x</option>
                        <option value="1.25">1.25x</option>
                        <option value="1.5">1.5x</option>
                        <option value="2">2x</option>
                    </select>
                </div>
            </div>
        </div>
        
        <div class="video-list-container">
            <h3>视频列表</h3>
            <ul id="videoList" class="video-list">
                <!-- 视频列表将通过JavaScript动态加载 -->
            </ul>
        </div>
    </div>

    <script src="player.js"></script>
</body>
</html>